<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vuedemo01</title>
  <script src="../lib/vue.js"></script>
  <style>
    .a {
      color: red;
    }

    .b {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 插值语法 -->
    <h1>{{ msg + ' msg2'.toUpperCase() }}</h1>
    <h2>{{ count }}</h2>
    <!-- vue的事件 @事件名 -->
    <button :disabled="disCpt" @click="clickHandle">我是一个按钮</button>

    <!-- <input type="text" v-model="msg" /> -->
    <input type="text" v-model="msg" />
    <hr />

    <!-- 姓：<input type="text" v-model="firstName" @input="fn1" /> <br>
    名：<input type="text" v-model="lastName" @input="fn1" /> <br>
    <h3>完整名字(方法实现)：{{ fullName }}</h3> -->

    姓：<input type="text" v-model="firstName" /> <br>
    名：<input type="text" v-model="lastName" /> <br>
    <button @click="fullNameCpt='joe x'">setter</button>
    <h3>完整名字(计算属性实现)：{{ fullNameCpt }}</h3>
    <!-- <h3>完整名字(watch实现)：{{ fullNameCpt }}</h3> -->

    <hr>
    <h2 :style="{ color: color, fontSize: fontSize }">style样式测试</h2>
    <h2 class="a" :class="{ b: count === 5 ? true : false }">class样式测试</h2>

    <hr>
    <!-- 条件判断 -->
    <h2 v-if="count === 3">{{ msg + '我是if' }}</h2>
    <h2 v-else-if="count === 4">{{ msg + '我是else-if' }}</h2>
    <h2 v-else>{{ msg + '我是else' }}</h2>

    <h2 v-show="count === 3">{{ msg + '我是show' }}</h2>

    <hr>
    <!-- 循环遍历 -->
    <ul>
      <li v-for="(item, idx) in nums" :key="idx">{{ (idx) + '---' + item }}</li>
    </ul>
    <ul>
      <li v-for="(item, idx) in persons">{{ (idx + 1) + '---' + item.name + '--' + item.age }}</li>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      // 选项
      el: '#app', // 绑定容器用的
      data() {
        return {
          // 在data中定义我们 页面中用到的 变量
          msg: 'hello word',
          count: 0,
          dis: false, // 默认禁用
          firstName: 'Foo',
          lastName: 'Bar',
          fullName: 'FooBar',
          color: 'green',
          fontSize: '33px',
          nums: [2, 3, 44, 55],
          persons: [
            { name: '刘', age: 32 },
            { name: '吴', age: 20 }
          ]
        }
      },
      methods: { // 这里是定义方法的
        // 单击事件的方法
        clickHandle() {
          ++this.count
          this.color = 'red'
          console.log('-----', this.count)
        },
        fn1() {
          this.fullName = this.firstName + this.lastName
        }
      },
      // 计算属性
      computed: {
        disCpt() {
          return this.count >= 5 ? true : false
        },

        //默认只有getter
        fullNameCpt() {
          return this.firstName + this.lastName
        },
        //增加setter——方法需要写成对象
        fullNameCpt: {
          get() {
            return this.firstName + this.lastName
          },
          set(val) {
            let name = val.split(' ')
            this.firstName = name[0]
            this.lastName = name[1]
          }
        }
      },
      // watch
      // watch: {
      //   firstName(newValue, oldValue) {
      //     this.fullName = newValue + this.lastName
      //   },
      //   lastName(newValue, oldValue) {
      //     this.fullName = this.firstName + newValue
      //   }
      // }
    })

    console.log(vm, '----vm-----')

  </script>
</body>

</html>